<template>
    <div style="width:1200px;margin:20px auto;position: relative" >
      <div class=" menu_nav_now" v-bind:class="{menu_nav:menu_nav_isActive}" >
        <el-menu
          :default-active="$route.path"
          class="CourseNavMenu"
          router
          mode="vertical"
          @select="navMenuSelect"
          :collapse="isCollapse"
          >
          <el-menu-item v-for="item in menuList" :key="item.menu_id" :index="item.url" class="item_div" >
            <i :class="item.icon"></i>
            <router-link v-if="item.target" :to="item.url" target="_blank">
              {{item.name}}
            </router-link>
            <span v-else>
              {{item.name}}
            </span>
          </el-menu-item>
        </el-menu>
      </div>
      <router-view class="show_div"></router-view>
    </div>
</template>

<script>
export default {
  name: 'CourseManage',
  data () {
    return {
      activeIndex: '/backHome/courseManage/index',
      menu_nav_isActive: false,
      isCollapse: false,
      menuList: []
      // menuList: [
      //   {
      //     menu_id: '1',
      //     name: '管理首页',
      //     icon: 'el-icon-s-home',
      //     url: '/backHome/courseManage/index'
      //   },
      //   {
      //     menu_id: '2',
      //     name: '发布课程',
      //     icon: 'el-icon-edit',
      //     url: '/backHome/courseManage/createCourse'
      //   },
      //   {
      //     menu_id: '3',
      //     name: '我的课程',
      //     icon: 'el-icon-s-management',
      //     url: '/backHome/courseManage/cManageClass'
      //   },
      //   {
      //     menu_id: '4',
      //     name: '课程分析',
      //     icon: 'el-icon-s-marketing',
      //     url: '/backHome/courseManage/courseAna'
      //   },
      //   {
      //     menu_id: '5',
      //     name: '学员分析',
      //     icon: 'el-icon-s-data',
      //     url: '/backHome/courseManage/studentAna'
      //   },
      //   {
      //     menu_id: '6',
      //     name: '我的课程-学生',
      //     icon: 'el-icon-notebook-1',
      //     url: '/backHome/courseManage/myCourse'
      //   },
      //   {
      //     menu_id: '7',
      //     name: '收藏',
      //     icon: 'el-icon-star-on',
      //     url: '/backHome/courseManage/favorite'
      //   },
      //   {
      //     menu_id: '8',
      //     name: '笔记',
      //     target: false,
      //     icon: 'el-icon-edit-outline',
      //     url: '/backHome/courseManage/note'
      //   },
      //   {
      //     menu_id: '9',
      //     name: '问答',
      //     target: false,
      //     icon: 'el-icon-s-comment',
      //     url: '/backHome/courseManage/question'
      //   }
      // ]
    }
  },
  components: {
  },
  methods: {
    navMenuSelect  (key, value) {
    },
    handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // console.log(scrollTop)
      if (scrollTop > 230) {
        this.menu_nav_isActive = true
      } else {
        this.menu_nav_isActive = false
      }
    },
    getMenuList () {
      var _this = this
      var userId = this.$store.state.user.userId
      this.$axios.post('/api/path/getMenuPath',
        this.$qs.stringify({
          userId: userId,
          type: 3
        }))
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            _this.menuList = data.result
          }
        })
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
    // 获取地址栏中的路由，设置elementui中的导航栏选中状态
    this.activeIndex = window.location.pathname
    this.getMenuList()
  }
}
</script>

<style scoped>
  .menu_nav_now{
    position: absolute;
    left: 24px;
    top: 20px;
    width: 172px;
  }
.menu_nav{
  position: fixed;
  left: 375.5px;
}
  .show_div {
    margin-left: 240px;
    min-height: 589px;
  }
  .el-menu{
    border-right: 0px ;
    font-size: 20px;
  }
  .el-menu-item.is-active{
    color: #fff;
    background-color: rgba(240,20,20,.8);
    border-radius: 8px 0 0 8px;
  }
  .el-menu-item.is-active:hover{
     color: #FFF
   }
  .el-menu-item.is-active:after{
    display: block;
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    top: 0;
    border-top: 24px solid #fff;
    border-bottom: 24px solid #fff;
    border-left: 15px solid transparent;
  }
  .item_div{
    height: 100%;
    line-height: 50px;
    font-size: 16px;
    color:#787d82;
    text-align: center;
  }

  .item_div:hover{
    color: #1c1f21;
  }
  .item_div a{
    color:#787d82;
    text-decoration: none;
  }
  .item_div a:visited{
    color:#787d82;
  }
</style>
